/**
 * 元素点击范围扩展指令 v-expandClick="10,10,10,10"
 * @param (top, right, bottom, left)
 */

export default function (el, binding) {
	const s = document.styleSheets[document.styleSheets.length - 1];
	const DEFAULT = -10; // 默认向外扩展10px
	const [top, right, bottom, left] = binding.expression && JSON.parse(binding.expression);
	const ruleStr = `content:"";position:absolute;top:-${top || DEFAULT}px;bottom:-${bottom || DEFAULT}px;right:-${right || DEFAULT}px;left:-${
		left || DEFAULT
	}px;`;
	const classNameList = el.className.split(" ");
	el.className = classNameList.includes("expand_click_range") ? classNameList.join(" ") : [...classNameList, "expand_click_range"].join(" ");
	el.style.position = el.style.position || "relative";
	if (s.insertRule) {
		s.insertRule(".expand_click_range::before" + "{" + ruleStr + "}", s.cssRules.length);
	} else {
		/* IE */
		s.addRule(".expand_click_range::before", ruleStr, -1);
	}
}
